<template>
	<view class="container">
		<view class="item flex-row">
			<text class="label">头像</text>
			<view class="flex-row">
				<xbc-avatar :src="user?.avatar" size="36px" />
			</view>
		</view>
		<view class="item flex-row">
			<text class="label">昵称</text>
			<view class="input">{{ user?.name }}</view>
		</view>
		<view @tap="setLang" class="item flex-row">
			<text class="label">翻译</text>
			<view class="input flex-row">
				<text>设置</text>
				<text class="iconfont icon-arrow-right"></text>
			</view>
		</view>
		<view @tap="logout" class="btn flex-column">退出登录</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import XBCIM from 'xbcim'

const user = ref({})

function setLang(){
	uni.navigateTo({
		url: '/pages/mine/lang'
	})
}

function logout(){
	uni.showModal({
		title: '提示',
		content: '是否确认退出登录',
		success: res=>{
			if(res.cancel) return
			XBCIM.destroy()
			uni.removeStorageSync('userId')
			uni.navigateTo({
				url: '/'
			})
		}
	})
}

async function getProfile(){
	user.value = await XBCIM.getUserProfile()
}

onShow(() => {
	getProfile()
})
</script>

<style lang="scss" scoped>

.btn {
	color: red;
	height: 80rpx;
	margin: 40rpx;
	font-size: 32rpx;
}

.item {
	height: 120rpx;
	padding: 0 30rpx;
	border-bottom: 2rpx solid #f5f5f5;

	.label,
	.input {
		color: #333;
		font-size: 30rpx;
	}

	.input {
		text-align: right;
	}
}
</style>